const {merge} = require("webpack-merge")
const path = require("path")
const baseConfig = require("./webpack.config.base")
const buildConfig = require("./webpack.build")
const webpack = require("webpack")
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin")
const config= {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              // modules: {
              //   localIdentName: "[local]--[hash:base64:5]"
              // }

            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      },
      {
        test: /\.less$/,
        include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: {
                localIdentName: "[local]--[hash:base64:5]"
              }

            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader:"less-loader",
            options:{
              javascriptEnabled:true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|ttf|eot)$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: 'file-loader',
          options: {
              limit: 10000,
              name: "assets/img/[name].[ext]"
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: 'file-loader',
          options: {
              limit: 10000,
              name: 'assets/Particle/[name].[ext]'
          }
        }
      },
    ]
  },
  optimization: {
    splitChunks: {
      name: "common",
      chunks: "initial",
      cacheGroups: {
        common: {
          name: "common",
          chunks: "initial",
          priority: 2,
          minChunks: 2
        }
      }
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),//使用hmr的时候，需要满足两个条件： 1.配置devServer.hot为true 2.配置webpack.
    new webpack.NoEmitOnErrorsPlugin(), //暂时用途不详，类似于try catch  遇见错误不停止代码
    // new HardSourceWebpackPlugin()
    // new HardSourceWebpackPlugin(), // 在第二次项目构建时可以缩减百分之七十左右时间  使用此插件时不能同时使用mini-css-extract-plugin 版本原因无法使用
    new webpack.DefinePlugin({
      API_PORT: "'"+ buildConfig.ports.api_port + "'",
      "NODE": "'" + "webpack环境中定义的常量NODE"+ "'"
    }),
  ],
  // devtool: "source-map", //导出sourceMap文件（sourceMap文件的作用是使我们在网页查看代码时为我们的书写格式， 而不是webpack打包之后的格式）不可用于生产模式
  devtool: "cheap-module-eval-source-map",
  devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    open: true,
    hot: true,
    // hotOnly: true,
    // historyApiFallback: true,//使用BrowserRouter时须设置此项为true  映射路由请求
    publicPath: "/",
    openPage: "index.html",
    overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
      errors:true,
      warnings:true,
    },
    // inline: true,
    before(app,server) {
      app.get("/api/info", (req, res) => {
        res.json({
          hello: "devServer"
        })
      })
    },
    port: buildConfig.devPort,
  }
}
module.exports = merge(baseConfig, config)
